<template>
    <div>
    <van-nav-bar  title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" >
  <template #right>
    <van-icon :name="m%2==0?'like':'like-o'"  color="#1998fb" size="18" @click='change' />
  </template>
</van-nav-bar>
<ul  class='u1'>
    <li class='li1'>
        <h2>{{data.cd_name}}</h2>
        <span>特来电权益</span>
        <span>自营</span>
        <span>对外开放</span>
    </li>
    <li  class='li2'>
        <img :src="`${data.cd_src}`" alt="">
    </li>
</ul>
  <ul  class='u2'>
    <li  class='li1'>
        <h3>{{data.cd_address}}</h3>
        <span  style="color:#10c5ef">（具体位置及线路可点击'查看位置示意图'）</span>
    </li>
    <router-link  to='/amap'><li  class='li3'><van-icon name="guide-o" size='30'  color=#10c5ef /></li></router-link>
  </ul>
  <div  class='d1'>
    <span>充电专用车位</span><span>专人值守</span><span>洗手间</span><span>简餐</span><span>场所照明</span>
  </div>
  <ul  class='u3'>
    <li  style="color:#10c5ef">详情信息</li>
    <li>价格信息</li>
    <span>当前时段 00:00-24:00</span>
    <li>
    <span  style="color:red;font-size:30px;">{{data.cd_price}}</span>
    <span  style="color:red;">元/度</span>
    </li>
    <van-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
    <li>
        <p>优惠</p>
        <span>可用优惠券4张</span>
    </li>
    <li>
        <p>停车参考价</p>
        <span  style="color:#10c5ef">新能源车辆充电2小时免费，超过2个小时按停车场收费标准执行</span>
    </li>
    <li>
        <p>电站信息</p>
    </li>
    <li>
        <span>支付方式</span>
        <span>本app,特来电微信、支付宝小程序</span>
    </li>
    <li>
        <span>营业时间</span>
        <span>周一至周日00:00-24:00</span>
    </li>
    <li>
        <span>服务提供</span>
        <span>特来电</span>
    </li>
    <li>
        <span>发票提供</span>
        <span>特来电股份</span>
    </li><li>
        <span>客服热线</span>
        <span  style="color:#10c5ef">{{data.cd_tel}}</span>
    </li>
  </ul>
    </div>

</template>

<script>
    export default {
         setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
        data() {
            return {
                value: 1,
                data:[],
                num:'',
                active:[],
                m:1,
                 xm:'zhangsan'
            }
        },
        mounted () {
            this.getData()
            this.update()
        },
        methods: {
        getData(){
     let url='/chongdian/select'
     this.axios.get(url).then(res=>{
    // console.log("r",res)
      this.num=this.$route.query.cd_id
      let id=this.$route.query.cd_id-1
      this.data=res.data.result[id]
     })
    },
      update(){
        this.num=this.$route.query.cd_id
        console.log(this.num);
          let url=`/save/selectsv?sv_id=${this.num}&sv_user=${this.xm}`
        this.axios.get(url).then(res=>{
        console.log('res:',res);
        if(res.data.code==200){
            this.m=0
        }else{this.m=1}
       })
       console.log(this.m);
            },
    change(){
        
       let url='/save/addsv?sv_id='
       let scr=`${this.num}&sv_user=${this.xm}&sv_name=${this.data.cd_name}`
       let url1=url+scr
        let url2="/save/delete/?sv_id="+`${this.num}`
        if(this.active.length==0){
                this.active[0]={value:this.num,act:0}
                this.active[0].act=this.active[0].act+1
                this.m+=this.active[0].act
        }
        else{
            let n=0
            for(var i=0;i<this.active.length;i++)
            {
                if(this.active[i].value==this.num){
                    ++this.active[i].act
                    this.m=this.active[i].act
                }else{
                        n++
                        if(n==this.active.length){this.active[this.active.length]=[{value:this.num,act:0}],
                         this.m=0}
                        
                }
            }
        }
       console.log(this.m);
       if(this.m%2==0)  {
            this.axios.get(url1).then(res=>{
        console.log(res);
       })}
       else{
        this.axios.get(url2).then(res=>{
        console.log(res);

    })}
    }
        },
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
::v-deep .van-nav-bar__title{
color:#1998fb;
}
.u1,.u2{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}
 span{
    margin-right: 10px;
    font-size: 12px;
}
.li2{
    width: 90px;
    height: 90px;
   margin: 0 10px;
    border-radius: 10px;
    overflow: hidden;
}
.li3{
   margin-right: 40px;
}
img{
    height: 100%;
}
.d1{
    margin: 10px ;
}
.u3{
    margin: 10px;
}
.u3>li,.u3>li>p{
    margin: 10px 0;
}
</style>